import React, { memo, useEffect, useState } from 'react'
import {get,del,add,gai,serch,xian} from './api/todo'
const App = memo(() => {

   const [kong,setK]=useState([])
   const [value,setValue]=useState()
   const [yi,setYi]=useState('')
   const [dis,setDis]=useState('none')
   const [id,setid]=useState()
  //  拿一个函数来调用请求方法
   const fn=async()=>{
    let res=await get()
    setK(res.data)
   }
  //  在这里调用封装的方法
   useEffect(()=>{
      fn()
   },[])
  
  return (
    <div>
        {kong.map(item=>(
          <div key={item.id}>{item.name}
           <button onClick={async()=>await del(item.id).then(fn())}>删除</button>
           <button onClick={()=>{setDis('block');setid(item.id)}}>修改</button>
           <button onClick={async()=>await xian(item.id).then(fn())}>查看</button>
          </div>
        ))}
        <input type="text"  value={value} onChange={(e)=>setValue(e.target.value)}/>
        <button onClick={async()=>await add({name:value,id:Date.now(),pirce:2}).then(fn())}>添加数据</button>
          {/* 修改数据 */}
        <div style={{display:dis}}>
           <input type="text" value={yi} onChange={(e)=>setYi(e.target.value)}/>
           <button onClick={async()=>{setDis('none');await gai(id,{name:yi}).then(fn())}}>确定</button>
           <button onClick={()=>setDis('none')}>取消</button>
        </div>
     
        <button onClick={async()=>{await serch('华').then(fn());console.log(serch('华'));}}>搜索</button>
          
    </div>
  )
})

export default App
